<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../static/layui/css/layui.css">

    <!---->
    <link rel="stylesheet" href="../../static/fonts/font-awesome/font-awesome.css">
    <link rel="stylesheet" href="../../static/styles/bootstrap.min.css">
    <link rel="stylesheet" href="../../static/styles/main.min.css">

    <!--layui修改样式-->
    <link rel="stylesheet" href="../../static/styles/layui-alter.css">

    <link rel="stylesheet" href="../../static/styles/login.css">
</head>
<body>
<div class="page page-auth clearfix">

    <div class="auth-container">
        <!-- site logo -->
        <h3 class="text-normal h2 text-center">用户登录</h3>

        <div class="form-container body">
            <form class="form-horizontal" method="post" action="/login">

                <div class="form-group form-group-lg">
                    <input class="form-control" id="empAccount" name="username" type="text" placeholder="账号">
                </div>

                <div class="form-group form-group-lg">
                    <input class="form-control" id="password" name="password" type="password" placeholder="密码">
                </div>


                <div class="clearfix"><!--<a th:href="@{#}" class="right small">忘记密码?</a>-->
                </div>
                <div class="clearfix mb15">
                    <input type="button" class="btn btn-lg btn-w120 btn-primary text-uppercase loginBtn" value="登录"/>
                    <div class="ui-checkbox ui-checkbox-primary mt15 right">
                        <label>
                            <input type="checkbox" name="remember">
                            <span>记住账号</span>
                        </label>
                    </div>
                </div>
                <div class="clearfix text-center">
                </div>
            </form>
        </div>
    </div>
</div>

<script src="../../static/layui/layui.js"></script>
<script>
    layui.use(['layer', 'jquery'],function () {
        var $ = layui.jquery;
        var layer = layui.layer;

        //登录事件
        $("input.loginBtn").click(function () {
            if ($("input[name='username']").val() == ""){
                layer.msg("账号或密码不能为空！", {icon: 0, time: 1400,anim:6});

            } else if ($("input[name='password']").val() == "") {
                layer.msg("密码不能为空", {icon: 0, time: 1400,anim:6});

            } else {
                var index = layer.load(0, {
                    shade: [0.3, '#fff'], //0.1透明度的白色背景
                });
                //用户登录请求
                $.ajax({
                    type: "POST",
                    url: "/login",
                    dataType: "json",
                    data: {
                        username:$("input[name='username']").val(),
                        password:$("input[name='password']").val()
                    },
                    success: function (data) {
                        console.log(data);
                        layer.close(index);
                        if (data['result'] == "success") {
                            window.location.href = "/";
                        } else {
                            layer.msg(data['msg'], {icon: 0, time: 1400});
                        }
                    }
                });
            }
        })
    })

</script>
</body>
</html>
